import { CockpitChartBaseProps } from "../helps";
import React from "react";
import * as echarts from "echarts";
export interface KxProjectProcessBarChart extends CockpitChartBaseProps {
  img?: any;
}
import ReactECharts from "echarts-for-react";
import type { EChartsOption } from "echarts";

export const getKxProjectProcessBarChartOption = ({
  dataSource = [],
}: KxProjectProcessBarChart): EChartsOption => {
  return {
    grid: {
      left: "18%",
      bottom: 15,
    },
    tooltip: {
      show: true,
    },
    legend: {
      data: ["计划完成", "实际完成"],
      top: "5%",
      right: "10",
      textStyle: {
        fontSize: 14,
        color: "#FDFFFF",
      },
      itemWidth: 19,
      itemHeight: 6,
      itemGap: 35,
    },
    barWidth: 15,
    xAxis: {
      type: "value",
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        //  改变x轴颜色
        show: false,
      },
      axisLabel: {
        //  改变x轴字体颜色和大小
        show: false,
      },
    },
    yAxis: {
      type: "category",
      data: dataSource.map((d) => d.name || ""),
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        //  改变y轴颜色
        show: false,
      },
      axisLabel: {
        //  改变y轴字体颜色和大小
        fontSize: 16,
        color: "#FFFFFF",
        margin: 39,
        overflow: "truncate",
        width: 65,
        align: "center",
      },
    },
    series: [
      {
        type: "bar",
        name: "计划完成",
        barWidth: 8,
        barGap: "140%",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            {
              offset: 0,
              color: "#07E4F7",
            },
            {
              offset: 1,
              color: "#4A2FDD",
            },
          ]),
          borderRadius: 12,
        },
        data: dataSource.map((d) => d.planFinishPercent || 0),
      },
      {
        type: "bar",
        name: "实际完成",
        barWidth: 8,
        barGap: "140%",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            {
              offset: 0,
              color: "#ABFFAF",
            },
            {
              offset: 1,
              color: "#1DFFF2",
            },
          ]),
          borderRadius: 11,
        },
        data: dataSource.map((d) => d.realFinishPercent || 0),
      },
    ],
  };
};

const KxProjectProcessBarChart = ({
  reactEChartsProps,
  dataSource,
}: KxProjectProcessBarChart) => {
  return (
    <ReactECharts
      {...reactEChartsProps}
      style={{
        height: "461px",
      }}
      option={getKxProjectProcessBarChartOption({
        dataSource,
      })}
    />
  );
};

export default KxProjectProcessBarChart;
